import React, { useState } from 'react'
import style from "./index.module.css"
import {
  Button,
  Select,
  Input,
} from 'antd';
import {
  useNavigate,
  NavLink,
  Link,
  Outlet,
} from "react-router-dom"
import {
  BellOutlined,
  AudioOutlined,
  ReloadOutlined,
  EditOutlined,
  MenuFoldOutlined
} from '@ant-design/icons'

import Range from '../../compoennts/notice/Range';
// const { RangePicker } = DatePicker;

import Noticetable from '../../compoennts/notice/Noticetable';
export default function Index() {
  const Navigate = useNavigate();
  const foo = () => {
    Navigate(-1)
  }

  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  const { Search } = Input;
  const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: '#1890ff',
      }}
    />
  );
  const onSearch = (value) => console.log(value);
  return (
    <>
          <Outlet />
    <div className={style.box}>
      <div className={style.left}>
        <ul>
          <li><BellOutlined />局校通知</li>
        </ul>
      </div>
      <div className={style.right}>
        <div className={style.topicon}><MenuFoldOutlined />
        </div>
        {/* <div className={style.right_top}>
          <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>选择日期:
            <div style={{ width: "200px" }}><Range /></div>
          </div>
          <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>类型：
            <div style={{ width: "60%" }}>
              <Select
                defaultValue="通知"
                style={{
                  width: 100,
                }}
                onChange={handleChange}
                options={[
                  {
                    value: '通知',
                    label: '通知',
                  },
                  {
                    value: '任务',
                    label: '任务',
                  },
                ]}
              />
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>发送范围：
            <div style={{ width: "50%" }}><Select
              defaultValue="全部学校"
              style={{
                width: 100,
              }}
              onChange={handleChange}
              options={[
                {
                  value: '全部学校',
                  label: '全部学校',
                },
                {
                  value: '部分',
                  label: '部分',
                },
              ]}
            />
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>快速搜索：
            <div style={{ width: "64%" }}><Search
              placeholder="请输入标题或发布者姓名"
              allowClear
              enterButton="搜索"
              size="large"
              suffix={suffix}
              onSearch={onSearch}
            />
            </div>
            <Button type="primary" shape="round" icon={<  ReloadOutlined />} size={'large'}>
              重置
            </Button>
          </div>
        </div> */}
        <div className={style.right_main}>
          {/* <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <Link to="addnotice"><Button type="primary" style={{ marginRight: "-1100px" }} shape="round" icon={< EditOutlined />} size={'large'}>发布通知</Button></Link>
          </div> */}
          
          <div><Noticetable /></div>
        </div>

      </div>
    </div>
    </>
  )
}
